<template>
	<el-tabs v-model="activeName" tab-position="left" type="border-card" @tab-click="handleClick">
		<el-tab-pane label="发现音乐" name="first">
			<findsong @childMethod="getsongurlData"></findsong>
		</el-tab-pane>
		<el-tab-pane label="热门前10歌手" name="second">
			<singer></singer>
		</el-tab-pane>
		<el-tab-pane label="推荐新音乐" name="third">
			<newsong></newsong>
		</el-tab-pane>
		<el-tab-pane label="推荐mv" name="fourth">
			<mvlist></mvlist>
		</el-tab-pane>
	</el-tabs>
</template>
<script>
	import findsong from '../findsong.vue'
	import singer from '../singer.vue'
	import newsong from '../newsong.vue'
	import mvlist from '../mvlist.vue'
	export default {
		data() {
			return {
				activeName: 'first'
			};
		},
		components: {
			"findsong": findsong,
			"singer": singer,
			"newsong": newsong,
			"mvlist": mvlist
		},
		methods: {
			handleClick(tab, event) {
				//console.log(tab, event);
			},

			//获取歌曲播放url
			async getsongurlData(val) {
				let {
					data: ret
				} = await this.$http.get('/song/url?id=' + val.id)
				console.log(ret)
				if (ret.code == 200) {
					//父页面数据
					let singernames = val.song.artists.map((item, index) => {
						return item.name;
					});
					singernames = singernames.join("、");
					this.$parent.$parent.$parent.currentSong.url = ret.data[0].url;
					this.$parent.$parent.$parent.currentSong.singer = singernames;
					this.$parent.$parent.$parent.currentSong.song = val.name;
				} else {
					// this.$toast(ret.message);
					console.log(ret.message)
				}
			}

		}
	};
</script>
